<template>
	<view class="Home">
		<view class="bgc">
			<view class="backgound"></view>
			<view class="backgound2"></view>
		</view>
		<view>

			<view class="codesr" style="margin-top:10%;">
				<uni-section padding>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="name" placeholder="请填写姓名"
						@input="input4"></uni-easyinput>
				</uni-section>
			</view>
			<view class="phoneyz">
				<view class="phonesr">
					<uni-section padding>
						<uni-easyinput class="uni-mt-5" trim="all" v-model="phone" placeholder="请填写注册手机号码"
							@input="input"></uni-easyinput>
					</uni-section>
				</view>
				<button :disabled="isCountingDown" class="mini-btn" size="mini" @click="fsdx"
					style="padding: 6rpx 20rpx;margin: 0;width: 200rpx;">{{ sendButtonText }}
				</button>
			</view>
			<view class="codesr">
				<uni-section padding>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="code" placeholder="请填写验证码"
						@input="input2"></uni-easyinput>
				</uni-section>
			</view>
			<view class="phoneyz">
				<view class="companysr">
					<uni-section padding>
						<uni-easyinput class="uni-mt-5" trim="all" v-model="companyId" placeholder="请填写用户名"
							@input="input3"></uni-easyinput>
					</uni-section>
				</view>
				<button class="mini-btn" size="mini" style="padding: 6rpx 20rpx;margin: 0; width: 200rpx;"
					@click="companyisregister">查询是否注册</button>
			</view>
			<view class="codesr">
				<uni-section padding>
					<uni-easyinput class="uni-mt-5" trim="all" v-model="ivcode" placeholder="请填写邀请码（选填）"
						@input="input2"></uni-easyinput>
				</uni-section>
			</view>
			<view class="addMoney">
				<view class="moneyLaut">
					<view class="money" v-for="(item,index) in money" @click="addmoneyValue(index)"
						:class="{'active':selectedIndex === index}">
						<view class="title" :class="{'active2':selectedIndex === index}">{{item.value}}</view>
						<view class="itemMoney">
							<span>￥</span>
							<span style="font-size: 50rpx;" >{{item.money}}</span>
						</view>
						<view class="itemCost" :class="{'active2':selectedIndex === index}">
							<span>￥</span>
							<span>{{item.cost}}</span>
						</view>
					</view>
				</view>
				<!--        <view class="selfaddmoney" :class="{'selfaddmoney1':isActive}">-->
				<!--          <text>选择开通时长:</text> <input @focus="isActive = true" @blur="isActive = false" type="text"-->
				<!--                                            :disabled="true"  v-model="addmoney" class="selfinput">-->
				<!--        </view>-->
			</view>
			<view style="padding: 30rpx;">
				<button class="uni-btn-v" style="margin-top:5%;" @click="sumit">支付并注册</button>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		DXFW,
		YZYZM,
		companyisregister,
		register,
		getWxPayState,
		payOrder
	} from '@/common/api.js'

	export default {
		data() {
			return {
				show: false,
				show1: false,
				showOverlay: false, // 控制overlay显示与否的变量
				appointmentStatus: true, // 假设初始状态为预约失败
				selectedOldMan: 0,
				selectedIndex: null, // 用于存储当前选中的元素索引
				countdown: 0,
				isCountingDown: false,
				infor: {},
				form: {},
				name: '',
				phone: '',
				companyId: '',
				code: '',
				ivcode: '',
				styles: {
					color: '#2979FF',
					borderColor: '#2979FF'
				},
				placeholderStyle: "color:#2979FF;font-size:14px",
				money: [{
						realpay: '29.9',
						cost: '39.9',
						money: '29.9',
						value: '单月礼包'
					},
					{
						realpay: '69.9',
						cost: '99.9',
						money: '69.9',
						value: '季度礼包'
					},
					{
						realpay: '239.9',
						cost: '339.9',
						money: '239.9',
						value: '年度礼包'
					}
				],
				selectedIndex: null,
				realpay: '29.9',
				addmoney: '',
				isActive: false,
			}
		},
		computed: {
			sendButtonText() {
				return this.isCountingDown ? `${this.countdown} 秒后重试` : '发送验证码';
			},
		},
		onLoad() {
			this.infor = uni.getStorageSync('infor');
			this.form = uni.getStorageSync('infor');
		},
		methods: {
			sumit() {
				if (!this.name) {
					uni.showToast({
						title: '请填写您的姓名',
						icon: 'none'
					})
					return false;
				}
				if (!(/(^[1][0-9]{10}$)/.test(this.phone))) {
					uni.showToast({
						title: '手机号不正确',
						icon: 'error',
						duration: 2000,
					});
					return false;
				}
				if (!this.code) {
					uni.showToast({
						title: '请填写验证码',
						icon: 'none'
					})
					return false;
				}
				if (!this.companyId) {
					uni.showToast({
						title: '请填写您的用户名',
						icon: 'none'
					})
					return false;
				}
				if (!this.addmoney) {
					uni.showToast({
						title: '请选择开通时长',
						icon: 'none'
					})
					return false;
				}
				const data = {
					companyId: this.companyId,
				}
				companyisregister(data).then((res) => {
					uni.hideLoading();
					if (res.code == 0) {
						this.registerover();
					} else {
						uni.showToast({
							title: '用户名已被注册，请更换用户名',
							icon: 'none'
						})
					}
				})
			},
			registerover() {
				const data = {
					phone: this.phone,
					code: this.code,
				}
				uni.showLoading({
					title: '加载中...',
				});
				// 验证验证码
				YZYZM(data).then((res) => {
					uni.hideLoading();
					if (res.code == 0) {
						// 支付
						this.pay();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			companyisregister() {
				if (!this.companyId) {
					uni.showToast({
						title: '请填写注册公司名称',
						icon: 'none'
					})
					return false;
				}
				const data = {
					companyId: this.companyId
				}
				uni.showLoading({
					title: '加载中...',
				});
				companyisregister(data).then((res) => {
					uni.hideLoading();
					if (res.code == 0) {
						uni.showToast({
							title: res.data,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			input(e) {
				console.log('输入内容：', e);
			},
			input2(e) {
				console.log('输入内容：', e);
			},
			input3(e) {
				console.log('输入内容：', e);
			},
			input4(e) {
				console.log('输入内容：', e);
			},
			addmoneyValue(index) {
				this.selectedIndex = index; // 设置当前选中的索引
				this.addmoney = this.money[index].value;
				this.realpay = this.money[index].realpay;
				uni.showToast({
					title: '已选择' + this.money[index].value,
					icon: 'none'
				})
			},
			fsdx() {
				const data = {
					phone: this.phone
				}
				uni.showLoading({
					title: '加载中...',
				});
				DXFW(data).then((res) => {
					uni.hideLoading();
					if (res.code == 0) {
						uni.showToast({
							title: res.data,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})

				this.isCountingDown = true;
				this.countdown = 60;

				this.startCountdown();
			},
			// 注册
			//     const data1 = {
			//       name: this.name,
			//       account: this.phone,
			//       phone: this.phone,
			//       companyId: this.companyId,
			//       datetype: this.addmoney,
			//       jurisdiction: 'all',
			//       password: '123456',
			//     }
			//     if (this.ivcode){
			//   data1.ivcode = this.ivcode;
			// }
			// console.log('data',data1)
			// uni.showLoading({
			//   title: '加载中...',
			// });
			// register(data1).then((res) => {
			//   uni.hideLoading();
			// })
			pay() {
				let that = this;
				uni.showLoading({
					title: '调起中...',
				});

				// 随机生成16位整数
				var randomNumber = Math.floor(Math.random() * 10000000000000000);
				const rdm = 'RC' + randomNumber;
				var form = {

					openid: uni.getStorageSync('openid'),
					description: that.phone + '账号开通-' + that.addmoney,
					attach: that.phone + '账号开通',
					PayFee: '0.01',
					// PayFee: that.realpay,
					TransactionId: rdm,
					datetype: that.addmoney,

					name: that.name,
					account: that.phone,
					phone: that.phone,
					companyId: that.companyId,
					datetype: that.addmoney,
					jurisdiction: 'all',
					password: '123456',
				};
				if (this.ivcode) {
					form.ivcode = that.ivcode;
				}
				console.log(form)
				payOrder(form).then((res) => {
					if (res.code == 0) {
						uni.hideLoading();
						console.log(res.data)
						const data = res.data;
						wx.requestPayment({
							timeStamp: data.timeStamp,
							nonceStr: data.nonceStr,
							package: data.package,
							signType: data.signType,
							paySign: data.paySign,
							success: function(wxRes) {
								console.log('成功', wxRes)
								const data0 = {
									transaction_id: rdm,
									type: that.addmoney,
									paytype: '开通',
								}
								getWxPayState(data0).then((res2) => {
									if (res2.code == 0) {
										uni.showToast({
											title: '开通成功',
											icon: 'success',
											mask: true
										});
										uni.navigateTo({
											url: '/subPackage/Function/Price/success?account=' +
												that.phone
										})
									} else {
										uni.showToast({
											title: res2.msg,
											icon: 'error',
											mask
										})
									}
								}).catch(function(err) {
									console.log('request fail', err);
									uni.showToast({
										title: '主动查询网络错误2',
										icon: 'error',
										mask: true
									});
								});
							},
							fail: function(result) {

							},
							complete: function(result) {
								console.log('complete', result)
							},
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'error',
							mask: true
						});
					}
				}).catch(function(err) {
					console.log('request fail', err);
					uni.showToast({
						title: '网络错误2',
						icon: 'error',
						mask: true
					});
				});
			},
			startCountdown() {
				const countdownInterval = setInterval(() => {
					if (this.countdown <= 0) {
						clearInterval(countdownInterval);
						this.isCountingDown = false;
						this.countdown = 0;
						return;
					}
					this.countdown -= 1;
				}, 1000);
			},
		},
	}
</script>


<style>
	.addMoney {
		//margin-top: 20rpx;
		height: 100%;
		padding: 30rpx 20rpx 54rpx 22rpx;
		//background: #FFFFFF;
		//box-shadow: 0rpx 8rpx 20rpx 0rpx rgba(0, 0, 0, 0.05);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.addMoneyTittle {
		font-size: 32rpx;
		color: #5448FF;
	}

	.moneyLaut {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.money {
		padding: 20rpx 0;
		background: white;
		width: 202rpx;
		/* height: 124rpx; */
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		//border: 1rpx solid #999999;
		text-align: center;
		/* line-height: 124rpx; */
		margin-bottom: 20rpx;
		transition: all 0.3s ease;
		/* 添加过渡效果 */
		box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
		/* 添加阴影效果 */
	}

	.active {
		/* border-color: #E6D39A; */
		/* 改变边框颜色 */
		/* background-color: #FFFAE7 ; */
		background: linear-gradient(#fdeac0, #fbdb90);
		/* 背景颜色 */
		color: #884507;
		/* 文本颜色 */
		/* box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3); */
		/* 添加阴影效果 */
	}

	.active2 {
		color: #884507 !important;
	}

	.title {
		font-weight: bold;
		color: #969696;
	}

	.itemMoney {
		color: #9f5c1c;
		font-weight: bold;
	}

	.itemCost {
		color: #969696;
		text-decoration: line-through;
		font-size: 20rpx;
	}

	.mini-btn {
		line-height: 20rpx;
		background-color: #F9363A;
		color: #fff;
		font-size: 35rpx;
		font-weight: bold;
		border-radius: 80rpx;
		text-align: center;
	}

	.uni-btn-v {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		background-color: #F9363A;
		color: #fff;
		font-size: 35rpx;
		font-weight: bold;
		border-radius: 80rpx;
		text-align: center;
		margin-top: 30rpx;
	}

	.uni-mt-5 {
		//margin-top: 5px;
	}

	.phoneyz {
		/* width: 100%; */
		display: flex;
		margin: 2px 20px;
		/* margin-top: 2%; */
		justify-content: space-between;
	}

	.phonesr {
		width: 70%;
	}

	.companysr {
		width: 70%;
	}

	.codesr {
		margin: 5px 20px;
		/* width: 50%; */
	}

	.Home {
		height: 100%;
		width: 100%;
	}

	.bgc {
		display: flex;
	}

	.backgound {
		width: 100%;
		height: 100%;
		background-image: linear-gradient(#FFE2D1, #FDF8F2);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: -9999;
	}

	.backgound2 {
		width: 100%;
		//height: 100%;
		background-color: #f0f0f0;
		position: absolute;
		top: 100%;
		z-index: -9999;
	}

	.img image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
</style>